$(function () {
    var xhr = new XMLHttpRequest()
    xhr.open("get", "../tea.json")
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            return xhrtext = JSON.parse(xhr.responseText)
        }
    }
    // 修改点击颜色与底边框
    $(".headlis .licolor").on("click", function () {
        $(this).css({
            color: "#90af6b",
            borderBottom: "1px solid #90af6b"
        })
        $(this).siblings().css({
            color: "#666666",
            borderBottom: "1px solid #f9f9f9"
        })
    })
    // 获取传递的茶类
    let teaType = decodeURIComponent(location.search).slice(6)
    // 判断当前茶的分类
    if (teaType !== "") {
        setTimeout(function () {
            teaClassify()
            $(".licolor").css({
                color: "#666666",
                borderBottom: "1px solid #f9f9f9"
            })
        }, 110)
    }
    // 分类茶
    $(".headlis").on("click", ".lis", teaClassify)

    function teaClassify() {
        $(".paging").hide()
        $(".conteas").empty()
        for (let i = 0; i < xhrtext.data.length; i++) {
            console.log($(this).text())
            if ($(this).text().trim() === xhrtext.data[i].type || xhrtext.data[i].type === teaType) {
                var str = `
            <li>
                <a href="./detail.html?tea=${xhrtext.data[i].name}"">
                <img src="${xhrtext.data[i].img}" alt="">
                <h4>${xhrtext.data[i].name}</h4>
                <div class="wire">
                    <div></div>
                </div>
                <p>￥${xhrtext.data[i].money}</p>
                <div class="goBox">
                </div>
                </a>
            </li>
            `
                $(".conteas").append(str)
            }
        }
        teaType = ""
    }

    // 全部茶
    $(".alltea").on("click", allteas)
    setTimeout(allteas, 100)

    // 封装添加li的函数
    function htmlAppend(a, b, c) {
        for (let i = c; i < a; i++) {
            var str = `
            <li>
                <a href="./detail.html?tea=${b[i].name}">
                <img src="${b[i].img}" alt="">
                <h4>${b[i].name}</h4>
                <div class="wire">
                    <div></div>
                </div>
                <p>￥${b[i].money}</p>
                <div class="goBox">
                </div>
                </a>
            </li>
            `
            $(".conteas").append(str)
        }
    }

    // 第一页
    function allteas() {
        $(".paging").css("display", "block")
        $(".conteas").empty()
        htmlAppend(xhrtext.data.length - 3, xhrtext.data, 0)
    }

    // 第二页
    function allteasTwo() {
        $(".conteas").empty()
        htmlAppend(xhrtext.data.length, xhrtext.data, 10)
    }

    let pagination = false
    $(".pagOne").on("click", function () {
        if (!pagination) {
            allteas()
            $(window).scrollTop(165)
        } else {
            pagTrue()
        }
    })
    $(".pagFor").on("click", function () {
        if (pagination) {
            allteasTwo()
            $(window).scrollTop(165)
        } else {
            pagFalse()
        }
    })
    $(".pagTWO,.pagThr").on("click", function () {
        pagination ? pagTrue() : pagFalse()
    })

    function pagTrue() {
        $(".pagTWO").text("2")
        $(".pagThr").text("下一页")
        $(".pagFor").text("最后一页").css("backgroundColor", "#eaeaea")
        $(".pagOne").text("1").css("backgroundColor", "#ffffff")
        allteas()
        pagination = !pagination
    }

    function pagFalse() {
        $(".pagOne").text("第一页").css("backgroundColor", "#eaeaea")
        $(".pagTWO").text("上一页")
        $(".pagThr").text("1")
        $(".pagFor").text("2").css("backgroundColor", "#ffffff")
        allteasTwo()
        pagination = !pagination
    }
})